<template>
  <div id="platPara">
    <v-header title="平台参数" :showDownloadBtn="false" :saveShow="false"></v-header>
    <el-container class="plat">
      <el-header class="header-tool-bar" height="50px">
        <!--工具栏-->
        <el-row>
          <el-button type="primary" size="mini" @click="adddialogForm">增加</el-button>
          <el-button type="primary" size="mini" @click.stop="removedata">删除</el-button>
          <el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
          <el-button type="primary" size="mini" @click="refresh">刷新</el-button>
          <span class="conditionquery">
          <el-input v-model="condition" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容"
                    clearable></el-input>
          <el-button type="primary" size="mini" @click="conditionquery">查询</el-button>
        </span>
        </el-row>
      </el-header>
      <el-main class="main-table-box">
        <!-- 表格 -->
        <el-table
          ref="table"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading="tableLoading"
          @selection-change="handleSelectionChange"
          @select="checkrow"
          v-model="checked">
          <el-table-column
            type="selection"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="class_id"
            label="分类ID"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="para_id"
            label="参数标识"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="para_name"
            label="参数名称"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="para_value"
            label="参数值"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="flag"
            label="标志"
            width="auto">
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </el-main>
    </el-container>

    <!--新增/编辑-弹框-->
    <el-dialog :title="addRoleDialogMode == 'ADD' ? '新增数据' : '编辑数据'"
               :visible.sync="addRoleDialogVisiable"
               v-model="addRoleDialogMode"
               width="900px"
               @close="cancel"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="分类ID" prop="class_id">
              <el-input v-model="ruleForm.class_id" :disabled="editclassdisa"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数标识" prop="para_id">
              <el-input v-model="ruleForm.para_id" :disabled="editparadisa"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="参数名称" prop="para_name">
              <el-input v-model="ruleForm.para_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数值" prop="para_value">
              <el-input v-model="ruleForm.para_value"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="参数描述" prop="para_desc">
              <el-input v-model="ruleForm.para_desc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标志" prop="flag">
              <el-input v-model="ruleForm.flag"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="dialogbtn">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="cancel">关闭</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--删除元事件弹框-->
  </div>
</template>

<script>
  import ajax from '../../../../api/ajax/ajax'
  import {VHeader} from '../../../../components'
  import {numLetteValidator, numberValidator} from '../../../../assets/js/rules'
  import api from '../../../../api/url'
  // let clearNewIndicator = vm => {
  //   vm.date = ''
  // }

  let kanbanAjax = vm => {
    // const SELECTData = {
    //   pageNo: '1',
    //   pageSize: '10'
    // }
    // ajax.post(SELECT_META_ELEM_LIST_FOR_PAGE, SELECTData).then((res) => {
    //   vm.tableData = res.data.list
    //   vm.totalCount = res.data.list.length
    // })
  }
  export default {
    name: 'plat-para',
    components: {
      VHeader
    },
    data () {
      return {
        tableLoading: true,
        checkbox: [], // 编辑判断是否只勾选一个
        multipleSelection: [], // 多选数组
        checked: false, // 是否勾选
        totalCount: 10, // 默认数据总数
        editclassdisa: false, // class_id input框禁止修改
        editparadisa: false, // para_id input框禁止修改
        addRoleDialogMode: 'ADD', // 对话框色对话框模式  ADD新增 MODIFY 修改
        currentPage: 1, // 当前页码
        pagesize: 10, // 默认每页数据量
        tableData: [], // 表格当前页数据
        list: [],
        date: [],
        condition: '', // 输入条件
        ruleForm: {}, // 弹窗表单
        rules: { // 弹窗校验规则
          class_id: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' },
            { validator: numLetteValidator, trigger: 'blur' }
          ],
          para_id: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' },
            { validator: numLetteValidator, trigger: 'blur' }
          ],
          para_name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          para_value: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          para_desc: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 150, message: '最多输入150个字符', trigger: 'blur' }
          ],
          flag: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 10, message: '最多输入10个字符', trigger: 'blur' },
            { validator: numberValidator, trigger: 'blur' }
          ]
        },
        addRoleDialogVisiable: false,
        editdialogform: false,
        currentItem: {}
      }
    },
    methods: {
      // 条件查询
      conditionquery () {
        this.handleCurrentChange()
      },
      // 每页显示条目个数
      handleSizeChange (val) {
        this.pagesize = val
        this.handleCurrentChange()
      },
      // 当前页数
      handleCurrentChange (val) {
        this.currentPage = val
        const pagelistdata = {
          keyword: this.condition,
          pageNo: val,
          pageSize: this.pagesize
        }
        ajax.post(api.SELECT_PARA_PLAT_LIST_FOR_PAGE, pagelistdata).then((res) => {
          this.tableLoading = false
          this.tableData = []
          this.tableData = res.data.list
          this.totalCount = res.data.total
          // kanbanAjax(this)
        })
      },
      // 勾选当前行
      checkrow (row) {
        if (row.length > 0) {
            this.ruleForm = row[0]
            this.checkbox = row
            this.checked = true
        } else {
          this.checked = false
        }
      },
      // 时间反显格式化
      // setTime (s) {
      //   let dateList = ''
      //   let arr = s.replace(/^(\d{4})(\d{2})(\d{2})$/, '$1,$2,$3').split(',')
      //   dateList = (new Date(new Date().setFullYear(Number(arr[0]), Number(arr[1]) - 1, Number(arr[2]))))
      //   return dateList
      // },
      // 编辑
      handleEdit (row) {
        // 判断是否勾选
        if (this.checked === true) {
          if (this.checkbox.length < 2) {
            this.addRoleDialogVisiable = true // 显示弹框
            this.editclassdisa = true // meta_id input框禁止修改
            this.editparadisa = true // para_id input框禁止修改
            this.addRoleDialogMode = 'MODIFY' // 新增角色对话框模式 编辑模式
            // 获取时间格式化 再添加到时间选择框里面
            // let data = this.ruleForm
            // this.te_date = this.setTime(data.te_date)
            // this.le_date = this.setTime(data.le_date)
            // this.ruleForm.date = [this.te_date, this.le_date]
            this.currentItem = JSON.parse(JSON.stringify(this.ruleForm))
            this.ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
          } else {
            this.$message.error('只能选择一条记录进行编辑')
          }
        } else {
          this.$message.error('请选择一条记录进行编辑')
        }
        // 当前选中数据
        // this.ruleForm = row
        // this.ruleForm.te_date = this.ruleForm.te_date + '000000'
        // this.ruleForm.te_date = new Date(parseInt(this.ruleForm.te_date.slice(6)))
        // this.ruleForm.le_date = this.ruleForm.le_date + '000000'
        // this.ruleForm.le_date = new Date(parseInt(this.ruleForm.le_date.slice(6)))
        // // // this.ruleForm.date[0] = this.ruleForm.te_date
        // // isDownLoad.push(this.ruleForm.te_date, this.ruleForm.le_date)
        // isDownLoad[0] = this.ruleForm.te_date
        // isDownLoad[1] = this.ruleForm.le_date
      },
      // 增加按钮
      adddialogForm () {
        this.ruleForm = {}
        this.currentItem = {}
        this.$refs.table.clearSelection()
        this.addRoleDialogVisiable = true
        this.addRoleDialogMode = 'ADD'
        this.editclassdisa = false
        this.editparadisa = false
      },
      // 返回
      cancel () {
        this.addRoleDialogVisiable = false
        this.editdialogform = false
        this.ruleForm = this.currentItem
        this.checked = false
        kanbanAjax(this)
        this.handleSizeChange()
        this.$refs.ruleForm.clearValidate()
      },
      // 重置
      resetForm () {
        this.ruleForm = {...this.currentItem}
        this.$refs.ruleForm.clearValidate()
      },
      // 勾选框事件
      handleSelectionChange (val) {
        let checkedCount = val.length
        // 判断是不是全选
        if (checkedCount === this.tableData.length) {
          this.checked = true
          this.checkbox.length = checkedCount
        } else {
          this.checked = false
        }
        this.list = []
        for (let i = 0; i < val.length; i++) {
          let remdata = {
            class_id: val[i].class_id,
            para_id: val[i].para_id
          }
          this.list.push(remdata)
        }
      },
      // 日期选择
      // dateflush (list) {
      //   if (list) {
      //     this.te_date = getDateTime(this.ruleForm.date[0], 's').replace(/^(\d{8})(\d{6})$/, '$1')
      //     this.le_date = getDateTime(this.ruleForm.date[1], 's').replace(/^(\d{8})(\d{6})$/, '$1')
      //   } else {
      //     this.le_date = ''
      //     this.te_data = ''
      //   }
      // },
      // formatDate () {
      //   // 把时间对象转成字符串长度为8
      //   if (typeof (this.te_date && this.le_date) === 'object') {
      //     let s = getDateTime(this.te_date, 's')
      //     let sl = getDateTime(this.le_date, 's')
      //     this.te_date = s.substring(0, 8)
      //     this.le_date = sl.substring(0, 8)
      //   }
      // },
      // 新增/修改 元事件
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          // this.formatDate()
          if (valid) {
              const insertdata = {
                class_id: this.ruleForm.class_id,
                para_id: this.ruleForm.para_id,
                para_name: this.ruleForm.para_name,
                para_value: this.ruleForm.para_value,
                para_desc: this.ruleForm.para_desc,
                flag: this.ruleForm.flag
              }
              if (this.addRoleDialogMode === 'ADD') {
                // 新增接口
                ajax.post(api.INSERT_PARA_PLAT, insertdata).then((res) => {
                  kanbanAjax(this)
                  this.handleSizeChange()
                })
                .then(() => {
                  this.$message({
                    type: 'success',
                    message: '增加成功!'
                  })
                  this.addRoleDialogVisiable = false
                  this.$refs.ruleForm.clearValidate()
                })
              } else if (this.addRoleDialogMode === 'MODIFY') {
                // 修改接口
                  ajax.post(api.UPDATE_PARA_PLAT, insertdata).then((res) => {
                    this.ruleForm = {}
                    this.handleSizeChange()
                  })
                  .then(() => {
                    this.$message({
                      type: 'success',
                      message: '编辑成功!'
                    })
                  })
                  .catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消编辑'
                    })
                  })
                  this.addRoleDialogVisiable = false
                  this.cancel()
                } else {
                  return false
                }
            }
        })
      },
      // 删除数据
      removedata () {
        if (this.checked === true) {
          this.$confirm('是否删除所选记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let remdata = {
              key_list: this.list
            }
            ajax.post(api.DELETE_PARA_PLAT, remdata).then((res) => {
              this.handleSizeChange()
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {})
        } else {
          this.$message.error('请至少选择一条记录进行删除')
        }
      },
      // 刷新
      refresh () {
        kanbanAjax(this)
        this.handleSizeChange()
        this.checked = false
      }
    },
    created () {
      this.handleSizeChange()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #platPara
    height 100%
    position relative
    .plat
      height 100%
      padding 10px 0px 20px 10px

      .header-tool-bar
        line-height 50px
        vertical-align middle
        background-color #FFFFFF
        margin-bottom 3px
        .conditionquery
          width 300px
          float right
          margin-right -10px
        .el-input--mini
          width 200px
        .el-button--danger
          background-color #016DFB
          border-color #016DFB
        .dialog-input
          width 210px
          height 30px
          border-radius 4px
          border 1px solid #D8DCE5
      .main-table-box
        padding 0px 0px
        height 100%
        background-color #fff
        .el-table
          padding-bottom 84px
        .el-pagination
          z-index 5
          height 36px
          background-color #fff
          position absolute
          width 100%
          bottom 0px
          padding-bottom 4px
          border-top solid 1px #f4f4f4
    .el-dialog
      width 30%
      .el-dialog__body
        padding 20px 20px
        margin 0 auto
        margin-right 20px
        .el-date-editor
          width 260px
        .el-input
          width 100%
          .el-input__inner
            height 40px
        .el-button--primary
          float right
          margin-left 10px
        .el-button
          float right
        .el-date-editor
          height 40px
          width 100% !important
          .el-range-separator
            height 25px
</style>
